<template>
	<view class="user">
		<view class="login" v-if="isLogin">
			<image :src="userInfo.avatarUrl" style="border-radius: 50%;"></image>
			<view class="loginInfo" >
				<view>{{ userInfo.nickName }}</view>
				<button type="default" size="mini">免费会员</button>
			</view>
		</view>
		<view class="login" v-else>
			<image src="@/static/images/default_avatar.png"></image>
			<view class="loginInfo" @tap="login">
				<view>请登录</view>
				<button type="default" size="mini">登陆后查看</button>
			</view>
		</view>
		<view class="userModule_content">
			<view class="userModule">
				<view class="userModule_box" @tap="pageGo($event)" data-url="/user/order/order">
					<image src="@/static/images/icons/member/order.png" mode=""></image>
					<view>我的订单</view>
				</view>
				<view class="userModule_box" url="/user/collect/collect">
					<image src="@/static/images/icons/member/collect.png" mode=""></image>
					<view>我的收藏</view>
				</view>
				<view class="userModule_box" url="/user/message/message">
					<image src="@/static/images/icons/member/message.png" mode=""></image>
					<view>我的消息</view>
				</view>
				<view class="userModule_box" url="/user/role/role">
					<image src="@/static/images/icons/member/role.png" mode=""></image>
					<view>会员中心</view>
				</view>
			</view>
			<view class="userRole">
				<image src="../../static/images/icons/vip.png"></image>
				<text v-if="isLogin">开通会员享更多会员特权</text>
				<button v-if="isLogin" size="mini" class="roleDetail">了解详情</button>
				<text v-else>登陆后查看</text>
			</view>
		</view>
		<view class="userMain">
			<view>我的课程</view>
			<view>我的邀请</view>
			<view>我的积分</view>
			<view>设置</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/utils.js';
export default {
	data() {
		return {
			userInfo: {},
			isLogin: false
		};
	},
	methods: {
		login() {
			wx.navigateTo({
				url: '/user/login/login'
			});
		},
		pageGo(e) {
			// console.log(e)
			let page = e.currentTarget.dataset.url;
			console.log(page);
			// console.log(util)
			util.go(page, true);
		}
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
		}
	}
};
</script>

<style lang="less">
.user {
	height: 100vh;
	padding: 0 20rpx;
	background: linear-gradient(#1684ec, #f2f2f2);
	.login {
		display: flex;
		align-items: center;
		color: white;
		height: 200rpx;
		image {
			margin: 0 25rpx;
			width: 120rpx;
			height: 120rpx;
		}
		.loginInfo {
			display: flex;
			flex-direction: column;
			button {
				margin-top: 20rpx;
				border-radius: 30rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: white;
				background-color: #8ec2f3;
			}
		}
	}
	.userModule_content {
		font-size: 25rpx;
		border-radius: 30rpx;
		overflow: hidden;
		.userModule {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			text-align: center;
			height: 200rpx;
			background-color: white;
			.userModule_box {
				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.userRole {
			fdisplay: flex;
			align-items: center;
			height: 80rpx;
			display: flex;
			align-items: center;
			background-color: #ffe6b4;
			image {
				width: 50rpx;
				height: 43rpx;
				margin: 0 20rpx;
			}
			text {
				color: #d98933;
				font-size: 30rpx;
			}
			.roleDetail {
				color: white;
				background: linear-gradient(#eaae3f, #d98424);
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
			}
		}
	}
	.userMain {
		background-color: white;
		display: flex;
		height: 450rpx;
		flex-direction: column;
		justify-content: space-evenly;
		border-radius: 30rpx;
		margin-top: 20rpx;
		overflow: hidden;
		padding: 0 38rpx;
	}
}
</style>
